<template>
  <el-card class="custom-card">
    <!-- 卡片顶部区域 -->
    <div class="flex flex-col">
      <!-- 大标题 -->
      <h1 class="contact-title">
        科研条件
      </h1>

      <div class="custom-double-divider">
        <el-divider class="title-divider" />
      </div>

      <!-- 科研条件内容 -->
      <div class="laboratory-container">
        <!-- 微生物分离与鉴定实验室 -->
        <div class="laboratory-section">
          <h2 class="laboratory-name">微生物分离与鉴定实验室</h2>
          <div class="laboratory-equipment">
            <p><strong>仪器设备：</strong>高速离心机、低温高速离心机、全自动核酸提取仪、全自动移液工作站、PCR仪、电泳仪、凝胶成像系统、生物安全柜、微生物生长曲线测定仪、恒温培养箱、菌落分析仪、全封闭厌氧微生物实验箱、超微量分光光度计、Qubit4.0荧光定量仪、恒温振荡培养箱等。</p>
          </div>
          <div class="equipment-images">
            <table class="image-table">
              <tr>
                <td><el-image src="/microbe/equipment/高速离心机.jpg" alt="高速离心机" class="equipment-image"/><br>高速离心机</td>
                <td><el-image src="/microbe/equipment/低温高速离心机.jpg" alt="低温高速离心机" class="equipment-image"/><br>低温高速离心机</td>
                <td><el-image src="/microbe/equipment/全自动核酸提取仪.jpg" alt="全自动核酸提取仪" class="equipment-image"/><br>全自动核酸提取仪</td>
              </tr>
              <tr>
                <td><el-image src="/microbe/equipment/全自动移液工作站.jpg" alt="全自动移液工作站" class="equipment-image"/><br>全自动移液工作站</td>
                <td><el-image src="/microbe/equipment/PCR仪.jpg" alt="PCR仪" class="equipment-image"/><br>PCR仪</td>
                <td><el-image src="/microbe/equipment/电泳仪.jpg" alt="电泳仪" class="equipment-image"/><br>电泳仪</td>
              </tr>
              <tr>
                <td><el-image src="/microbe/equipment/凝胶成像系统.jpg" alt="凝胶成像系统" class="equipment-image"/><br>凝胶成像系统</td>
                <td><el-image src="/microbe/equipment/生物安全柜.jpg" alt="生物安全柜" class="equipment-image"/><br>生物安全柜</td>
                <td><el-image src="/microbe/equipment/微生物生长曲线测定仪.jpg" alt="微生物生长曲线测定仪" class="equipment-image"/><br>微生物生长曲线测定仪</td>
              </tr>
              <tr>
                <td><el-image src="/microbe/equipment/恒温培养箱.jpg" alt="恒温培养箱" class="equipment-image"/><br>恒温培养箱</td>
                <td><el-image src="/microbe/equipment/菌落分析仪.jpg" alt="菌落分析仪" class="equipment-image"/><br>菌落分析仪</td>
                <td><el-image src="/microbe/equipment/全封闭厌氧微生物实验箱.jpg" alt="全封闭厌氧微生物实验箱" class="equipment-image"/><br>全封闭厌氧微生物实验箱</td>
              </tr>
              <tr>
                <td><el-image src="/microbe/equipment/超微量分光光度计.jpg" alt="超微量分光光度计" class="equipment-image"/><br>超微量分光光度计</td>
                <td><el-image src="/microbe/equipment/Qubit4.0荧光定量仪.jpg" alt="Qubit4.0荧光定量仪" class="equipment-image"/><br>Qubit4.0荧光定量仪</td>
                <td><el-image src="/microbe/equipment/恒温振荡培养箱.jpg" alt="恒温振荡培养箱" class="equipment-image"/><br>恒温振荡培养箱</td>
              </tr>
            </table>
          </div>
        </div>

        <!-- 微生物保藏实验室部分修改 -->
        <div class="laboratory-section">
          <h2 class="laboratory-name">微生物保藏实验室</h2>
          <div class="laboratory-equipment">
            <p><strong>仪器设备：</strong>超低温冰箱、液氮储存智能监控系统等。</p>
          </div>
          <div class="equipment-images">
            <table class="image-table">
              <tr>
                <td><el-image src="/microbe/equipment/超低温冰箱.jpg" alt="超低温冰箱" class="equipment-image tall-image"/><br>超低温冰箱</td>
                <td><el-image src="/microbe/equipment/超低温冰箱2.jpg" alt="超低温冰箱" class="equipment-image tall-image"/><br>超低温冰箱</td>              </tr>
              <tr>
                <td colspan="3"><el-image src="/microbe/equipment/液氮储存智能监控系统.jpg" alt="液氮储存智能监控系统" class="equipment-image wide-image"/><br>液氮储存智能监控系统</td>
              </tr>
            </table>
          </div>
        </div>

        <!-- 微生物发酵与检测实验室部分修改 -->
        <div class="laboratory-section">
          <h2 class="laboratory-name">微生物发酵与检测实验室</h2>
          <div class="laboratory-equipment">
            <p><strong>仪器设备：</strong>高温高压灭菌锅、全自动微生物发酵系统、实时荧光定量PCR仪、液相色谱-质谱联用测定仪、高效液相色谱测定仪等。</p>
          </div>
          <div class="equipment-images">
            <table class="image-table">
              <tr>
                <td><el-image src="/microbe/equipment/高温高压灭菌锅.jpg" alt="高温高压灭菌锅" class="equipment-image"/><br>高温高压灭菌锅</td>
                <td><el-image src="/microbe/equipment/全自动微生物发酵系统.jpg" alt="全自动微生物发酵系统" class="equipment-image"/><br>全自动微生物发酵系统</td>
                <td><el-image src="/microbe/equipment/实时荧光定量PCR仪.jpg" alt="实时荧光定量PCR仪" class="equipment-image"/><br>实时荧光定量PCR仪</td>
              </tr>
              <tr>
                <td colspan="1"><el-image src="/microbe/equipment/高效液相色谱仪.jpg" alt="高效液相色谱测定仪" class="equipment-image wide-image"/><br>高效液相色谱测定仪</td>
                <td colspan="2"><el-image src="/microbe/equipment/液相色谱-质谱联用测定仪.jpg" alt="液相色谱-质谱联用测定仪" class="equipment-image wide-image"/><br>液相色谱-质谱联用测定仪</td>
              </tr>
            </table>
          </div>
        </div>

      </div>
    </div>
  </el-card>
</template>

<script setup>
import { ref } from 'vue'
</script>

<style scoped>
/* 自定义卡片样式 */
.custom-card {
  border-radius: 0;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  padding: 2rem;
  transition: all 0.3s ease;
  max-width: 1200px;
  margin: 0 auto;
}

.custom-card:hover {
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
}

/* 标题样式 */
.contact-title {
  font-size: 35px;
  font-weight: bold;
  color: #333;
  text-align: start;
  margin-bottom: 2rem;
}

.laboratory-name {
  font-size: 1.8rem;
  font-weight: 600;
  color: #333;
  margin: 2rem 0 1rem;
  padding-bottom: 0.5rem;
  border-bottom: 2px solid #13675b;
}

/* 实验室容器样式 */
.laboratory-container {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.laboratory-section {
  padding: 1.5rem;
  background-color: #f9fafb;
  border-radius: 0.5rem;
  margin-bottom: 1.5rem;
}

.laboratory-equipment {
  margin: 1rem 0;
  line-height: 1.6;
  color: #555;
}

/* 设备图片表格样式 */
.equipment-images {
  margin-top: 1.5rem;
}

.image-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 1rem;
}

.image-table td {
  text-align: center;
  vertical-align: middle;
  padding: 0.5rem;
}

.equipment-image {
  width: 100%;
  max-width: 200px;
  height: 150px;
  object-fit: contain;
  border-radius: 0.5rem;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  margin-bottom: 0.5rem;
  transition: transform 0.3s ease;
}

.equipment-image:hover {
  transform: scale(1.05);
}

.image-table td {
  color: #555;
  font-size: 0.9rem;
}

/* 双分隔线样式 */
.custom-double-divider {
  display: flex;
  width: 100%;
  margin-bottom: 20px;
}

.title-divider {
  position: relative;
  border: none;
  margin: 0;
  height: 1px;
}

.title-divider::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 20%;
  height:4px;
  background: #13675b;
}

.title-divider::after {
  content: "";
  position: absolute;
  right: 0;
  top: 0;
  width: 80%;
  height: 1px;
  background: #e5e7eb;
}

/* 响应式调整 */
@media (max-width: 1024px) {
  .image-table {
    border-spacing: 0.5rem;
  }

  .equipment-image {
    max-width: 150px;
    height: 120px;
  }
}

@media (max-width: 768px) {
  .custom-card {
    padding: 1.5rem;
  }

  .contact-title {
    font-size: 1.8rem;
  }

  .laboratory-name {
    font-size: 1.5rem;
  }

  /* 表格响应式调整为2列 */
  .image-table {
    display: none;
  }

  .image-table-mobile {
    display: block;
  }

  .equipment-images {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1rem;
  }

  .equipment-item {
    text-align: center;
  }
}

@media (max-width: 480px) {
  .custom-card {
    padding: 1rem;
  }

  .contact-title {
    font-size: 1.5rem;
  }

  .equipment-images {
    grid-template-columns: 1fr;
  }

  .equipment-image {
    max-width: 100%;
    height: auto;
  }
}


/* 修改后的样式 */
.wide-image {
  width: 100%;
  max-width: 400px; /* 更宽的图片 */
  height: 180px;   /* 更高的图片 */
  object-fit: contain;
}

.tall-image {
  width: 100%;
  max-width: 500px; /* 更宽的图片 */
  height: 200px;   /* 更高的图片 */
  object-fit: contain;
}

.image-table td[colspan="2"] {
  width: 66.66%;
}

.image-table td[colspan="3"] {
  width: 100%;
}

/* 确保表格单元格宽度一致 */
.image-table td {
  width: 33.33%;
}
</style>